<template>
  <div>
      <div class="report-stock-item">
        <img src="@/static/images/report/report-stock-1.png" class="img-48" alt=""/>
        <div class="report-stock-item-content">
          <div class="paragraph-p3-light">未出单商品量</div>
          <div class="heading-h2 margin-top-div-8">{{ $baseJS.numberFormatter(stock.productNum.replace('个', '')) + '个' }}</div>
        </div>
      </div>
      <div class="report-stock-item">
        <img src="@/static/images/report/report-stock-2.png" class="img-48" alt=""/>
        <div class="report-stock-item-content">
          <div class="paragraph-p3-light">库存成本(¥)</div>
          <div class="heading-h2 margin-top-div-8">{{ '¥' + $baseJS.numberFormatter(stock.cost.replace('¥', '')) }}</div>
        </div>
      </div>
  </div>
</template>

<script>
import { getCurrentStockSummary } from "@/request/api";
import {Toast} from "vant";

export default {
  name: "ReportStock",
  props: {
    stock: {
      type: Object,
      default: () => ({
        productNum: {type: Number, default: () => (0)},
        cost: {type: Number, default: () => (0)},
        profit: {type: Number, default: () => (0)},
      })
    }
  },
  components:{},
  data() {
    return {}
  },
  mounted() {
    this.getStock()
  },
  methods: {
    getStock() {
      getCurrentStockSummary().then(res => {
        const { State, Data, Msg } = res
        if (State) {
          Data.forEach(stock => {
            const { name, amount } = stock
            if (name === '未出单商品量') {
              this.stock.productNum = amount
            }
            if (name === '库存成本(¥)') {
              this.stock.cost = amount
            }
            if (name === '毛利预算(¥)') {
              this.stock.profit = amount
            }
          })
        } else {
          Toast(Msg)
        }
      })
    },
  },
}
</script>

<style scoped>
.report-stock-item {
  height: 88px;
  background: #FFFFFF;
  box-shadow:0 4px 32px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  margin: 24px 16px;
  padding: 0 16px;
  display: flex;
  align-items: center;
}
.report-stock-item-content {
  width: 80px;
  margin-left: 8px;
}
</style>